<template>
  <view class="container">
    <u-navbar height="50" title="我要入驻" title-size="36" title-color="#333"></u-navbar>
    <view class="banner" @click="routeTo('/other/apply_join/apply_join')">
      <u-image :src="`${getImageUrl('join-banner.png')} `" width="100%" height="240rpx"></u-image>
    </view>
    <view class="card liucheng">
      <view class="card-tl">入驻流程</view>
      <view class="lc-list dis-flex flex-y-between flex-y-center">
        <view class="lc-item">
          <u-icon name="/static/tjzl.png" size="90"></u-icon>
          <view class="item-des">
            <view class="item-t">提交申请 </view>
            <view class="item-d">真实信息</view>
          </view>
        </view>
        <u-line class="lc-item" color="#D7EDF5"></u-line>
        <view class="lc-item">
          <u-icon name="/static/ptsh.png" size="90"></u-icon>
          <view class="item-des">
            <view class="item-t">平台审核 </view>
            <view class="item-d">1-3工作日</view>
          </view>
        </view>
        <u-line class="lc-item" color="#D7EDF5"></u-line>
        <view class="lc-item">
          <u-icon name="/static/kdcg.png" size="90"></u-icon>
          <view class="item-des">
            <view class="item-t">开店成功 </view>
            <view class="item-d">入驻成功</view>
          </view>
        </view>
      </view>
    </view>
    <view class="card ziliao">
      <view class="card-tl">开店需准备以下资料</view>
      <view class="ziliao-box">
        <view class="item dis-flex">
          <u-image
            class="image"
            :src="`${getImageUrl('yyzz.png')} `"
            width="240rpx"
            height="160rpx"
          ></u-image>
          <view class="item-r">
            <view class="t">1、营业执照 </view>
            <view class="d">需提供完整的营业执照照片</view>
          </view>
        </view>
        <view class="item dis-flex">
          <u-image
            class="image"
            :src="`${getImageUrl('card-sl.png')} `"
            width="240rpx"
            height="160rpx"
          ></u-image>
          <view class="item-r">
            <view class="t">2、法人身份证 </view>
            <view class="d">需提供营业执照法人的身份证正反 面照片</view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view class="floor-tip">
        <view @click="checked = !checked">
          <u-icon
            :name="checked ? '/static/selected.png' : '/static/unselect.png'"
            size="35"
            style="margin-right: 10rpx; margin-top: 12rpx"
          ></u-icon>
        </view>
        <text>我已阅读并同意</text>
        <text style="color: #fa453c" @click="routeTo('')">《商家入驻协议》</text>
      </view>
      <view @click="routeTo('/other/apply_join/apply_join')" class="submit-btn btn">
        资料已准备好了，立即入驻
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      checked: true
    }
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

page {
  background-color: #f0f1f2;
}

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  font-size: 28rpx;
  color: #333333;
  width: 100%;
}

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;
  padding-left: 4%;

  .submit-btn {
    width: 96%;
    // left: 4%;
  }
}

.container {
  padding: 20rpx;
}

.banner {
}

.card {
  height: 500rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 36rpx 20rpx;
  margin-top: 20rpx;

  .card-tl {
    font-weight: 600;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 39rpx;
  }
}

.liucheng {
  height: 320rpx;

  .lc-list {
    padding: 0 52rpx;
    text-align: center;

    .lc-item {
      flex: 1;
      position: relative;

      .item-des {
        position: absolute;

        .item-t {
          font-size: 28rpx;
        }

        .item-d {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}

.ziliao {
  height: 500rpx;

  .ziliao-box {
    display: inline-block;

    .item {
      margin-bottom: 30rpx;

      .image {
        // flex: 1;
        width: 240rpx;
        margin-right: 20rpx;
      }

      .item-r {
        flex: 1;

        .t {
          font-size: 28rpx;
          line-height: 48rpx;
        }

        .d {
          color: #999999;
          font-size: 24rpx;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
